<style lang="less" scoped>
    .main {
        border-top: 1px solid #ebebeb;
        .item {
            font-size: 0.28rem;
            color: #ababab;
            padding: 0.38rem 0.32rem 0.38rem;
            background: #fff;
            border-color: #f5f5f5;
            .title {
                font-size: 0.32rem;
                color: #272727;

            }
        }
    }

    .on_b {
        padding: 0.72rem 0.84rem;
        position: relative;
        button {
            padding: 0;
            height: 0.8rem;
            &.btns {
                position: static;
            }
        }
    }

    .img_box {
        width: 100%;
        background: #fff;
        display: flex;
        flex-wrap: wrap;
    }

    .business_title {
        width: 100%;
        height: .74rem;
        padding-left: .4rem;
        line-height: .74rem;
        font-size: .24rem;
        color: #666666;
    }
    .vux-1px-b{
        height: 1rem;
        line-height: 1rem;
        font-size: .24rem;
        padding-left: .2rem;
    }
    .sign{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        background-color: #fff;
        padding: .2rem;
        .title{
            font-size: 0.32rem;
            color: #272727;
            white-space: nowrap;
        }
        .signBox{
            width: 4.9rem;
            .sign_t{
                font-size: .28rem;
                color:#333;
                span{
                    display: block;
                    line-height: 1.5;
                    &:last-of-type{
                        font-size: .24rem;
                        color: #999999;
                    }
                }
            }
            .vux-1px-b{
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                padding: 0.2rem 0 .24rem;
                .img_box{
                    width: 1.52rem;
                    height: 1.2rem;
                    overflow: hidden;
                    border-radius: .1rem;
                    img{
                        display: block;
                        width: 100%;
                        height: 100%;
                    }
                }
                .content {
                    flex: 1;
                    text-align: left;
                    padding: 0 .2rem;
                    color:#666;
                    max-width: 50%;
                    span{
                        display: block;
                        font-size: .28rem;
                        line-height: 1.5;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        &:last-of-type{
                            font-size: .24rem;
                        }
                    }
                }
                .del{
                    font-size: .24rem;
                    color:#e94f4f;
                    line-height: 2;
                }
            }
        }
    }
    .downImg{
        width: 1.2rem;
        height: 1.2rem;
        &:first-of-type{
            margin-left: 0;
        }
    }
</style>
<style>
    .busnssInfo .weui-cell {
        padding: 0;
    }

    .busnssInfo .weui-label {
        font-size: 0.32rem;
        color: #272727;
    }
</style>
<template>
    <div class="busnssInfo">
        <v-header title="填写商家信息" type="/my/business">
            <div slot="left">
                <div class="backs_icon"></div>
            </div>
        </v-header>
        <div class="main main_allScroll" :style="{top:interactive.statusBarHeight.height}">
            <div class="business_title">基本信息</div>
            <div class="item vux-1px-b">
                <div class="title">门店名称</div>
                <input type="text" class="enter" placeholder="请输入店铺名称" v-model="date.merchantName">
            </div>
            <popup-picker title="商家类型" :data="list1" :columns="2" @on-show="onShow" @on-hide="onHide"
                          @on-change="onChange" :placeholder="date.cate"></popup-picker>
            <div class="item vux-1px-b">
                <div class="title">联系人</div>
                <input type="tel" class="enter" disabled="disabled" :value="user.nameHide">
            </div>
            <div class="item vux-1px-b">
                <div class="title">联系人电话</div>
                <input type="tel" class="enter" placeholder="请输入联系人电话" v-model="date.telephone">
            </div>
            <div class="item">
                <div class="title">门店地址</div>
                <div v-on:click="doShowAddress">
                    <div  :style="date.provinceCode ? {color: '#333333'} : {color: '#ababab'}">{{date.area}}
                        <div class="right_icon" style="margin-left: 0.24rem"></div>
                    </div>
                </div>
            </div>
            <div class="item vux-1px-b">
                <div class="title"></div>
                <input width="100%" style="width: 100%" type="text" class="enter" placeholder="请填写详细地址(详细至门牌号)"
                       v-model="date.detailAddress">
            </div>
            <!--<div class="item">
                <div class="title">营业时间</div>
                <input type="text" class="enter" placeholder="请输入营业时间" v-model="date.businessTime">
            </div>-->
            <div class="business_title">门店照片</div>
            <div class="sign">
                <div class="title">门店照片</div>
                <div class="signBox">
                <div class="sign_t">
                    <span>上传门店照片</span>
                    <span>真实美观的门店照片可以提升门店形象</span>
                </div>
                <div class="img_box">
                    <div class="downImg" v-for="(item,index) in extraImg" :style="(index+1)%3 == 1 ? {marginLeft: 0 } : ''">
                        <div class="delete" v-on:click="imgDelete(index)"></div>
                        <img v-lazy="item.prefix + item.imageUrl" alt="" @click="Interactive.productImageClick(item.prefix +  item.imageUrl,0)">
                    </div>
                    <div class="downImg" v-if="extraImg.length<=5" v-on:click="pushImg" :style="extraImg.length == 3 ? {marginLeft: 0 } : ''">
                        <img src="../../assets/img/add_img_icon.png" alt="" style="display: block;width: 100%;height: 100%;">
                    </div>
                </div>
            </div>
            </div>
            <div class="business_title">折扣</div>
            <div class="item vux-1px-b" @click="discountShow = true">
                <div class="title">折扣</div>
                <div class="enter">{{(date.discount * 10).toFixed(1)}}折</div>
            </div>
            <div class="on_b">
                <button class="btns buttonBR" :class="disabled ?'disabled':''" :disabled="disabled"
                        v-on:click="addBusiness">
                    <span>提交</span>
                </button>
            </div>
        </div>
        <popup v-model="discountShow" height="60%">
            <div style="overflow: hidden;height:100%;position: relative;width: 100%;">
                <popup-header
                        title="请选择折扣率"
                        :show-bottom-border="false"
                        @on-click-left="discountShow = false"
                        @on-click-right="discountShow = false;" style="position: absolute;width: 100%;z-index: 99">
                </popup-header>
                <div style="height: 100%;overflow-y: scroll;padding-top: .8rem;padding-left: .2rem;background-color: #fff;">
                    <div v-for="v in 100" class="vux-1px-b" @click="date.discount = ((100 - v + 1)/100).toFixed(2);discountShow = false" v-if="v>5 && v <= 91">{{((100 - v + 1)/10).toFixed(1)}}折</div>
                </div>
            </div>
        </popup>
        <v-selectAddress :title="title" placeholder="请选择地址" @on-shadow-change="onShadowChange" @on-hide="logHide" @on-close="doHideAddress" v-model="value" :show.sync="showAddress"></v-selectAddress>

    </div>
</template>
<script>
    import {UPDATA_INTERACTIVE} from 'store/interactive'
    import {mapActions, mapState} from 'vuex'

    import {UPDATE_BUSINESS, UPDATE_UPDATELIST} from 'store/business'
    import {CheckIcon,XButton, Cell, Value2nameFilter as value2name, Group, Picker, PopupPicker,  PopupHeader, Popup,Radio} from 'vux'

    export default {
        components: {
            CheckIcon,
            XButton,
            Cell,
            Group,
            Picker,
            PopupPicker,
            PopupHeader,
            Popup,
            Radio
        },
        data() {
            return {
                disabled: true,
                title: '所在区域',
                imgClick: "",
                areaArr: {},
                value: [],
                //地址选择框
                addressData: window.localStorage.hasOwnProperty('addressData') ? JSON.parse(window.localStorage.getItem('addressData')) : [],
                showAddress: false,
                extraImg: [],
                list1: [],
                // extraImg:[],
                date: {
                    merchantName: '',
                    categoryCode: '',
                    telephone: '',
                    province: '',
                    city: '',
                    district: '',
                    detailAddress: '',
                    businessTime: '',
                    mainImg: '',
                    extraImg: '',
                    fullAddress: '',
                    area: '省-市-地区',
                    cate: "请选择经营品类",
                    discount: 0.8
                },
                discountShow: false,
                variableDiscount: 0
            };
        },
        activated: function () {
            this.selectCategory();
            this.init();
        },
        deactivated: function () {
        },
        methods: {
            ...mapActions([UPDATE_BUSINESS, UPDATA_INTERACTIVE, UPDATE_UPDATELIST]),
            //选择分类
            selectCategory() {
                this.$ajax.inFo.queryCategory()
                    .then((res) => {
                        this.list1 = [];
                        res.body.content.forEach((v) => {
                            if(v.parentCode == '0'){
                                v.value = v.code;
                                this.list1.push(v)
                            }
                        })
                    })
            },
            onShow() {
            },
            onHide(type) {
                console.log('on hide', type)
            },
            onChange(val) {
                this.date.categoryCode = val[0];
                this.list1.forEach((v) => {
                    if (v.code == val[0]) {
                        this.date.cate = v.name;
                    }
                })
            },
            //获取分类
            init() {
                this.isDisabled()
                this.title = '所在区域';
                this.imgClick = "";
                this.value = [];
                this.extraImg = [];
                this.discountShow = false
                if(!!(this.$route.query.hasOwnProperty('error') && this.$route.query.error == 'error')){
                    this.queryMerchantInfo();
                } else {
                    this.date = {
                        name: '',
                        categoryCode: '',
                        telephone: '',
                        province: '',
                        city: '',
                        district: '',
                        detailAddress: '',
                        businessTime: '',
                        mainImg: '',
                        extraImg: '',
                        fullAddress: '',
                        area: '省-市-地区',
                        cate: "请选择经营品类",
                        discount: 0.8
                    }
                }
            },
            //获取认证失败商家详情
            queryMerchantInfo() {
                let that = this;
                this.$ajax.business.queryMerchantInfoVO({
                    merchantId: this.$route.query.merchantId
                })
                    .then(res => {
                        var obj = res.body.content.merchantDetailInfo
                        this.date = {
                            merchantName:obj.merchantName,
                            name: '',
                            categoryCode: obj.categoryCode,
                            telephone: obj.telephone,
                            province: obj.province,
                            city: obj.city,
                            district: obj.district,
                            detailAddress: obj.detailAddress,
                            businessTime: '',
                            mainImg: '',
                            extraImg: '',
                            fullAddress: '',
                            area: '省-市-地区',
                            cate: res.body.content.categoryName,
                            discount: obj.discount
                        }
                        let img = this.handleImg(JSON.parse(JSON.stringify(obj.extraImg)))
                        this.extraImg = img
                        this.getAreaConfig(obj.province, obj.city, obj.district)
                        this.isDisabled()
                    })
            },
            // 图片逆解码
            handleImg(data){
                var arr = []
                data.split(',').forEach((v)=>{
                    let imgArr = v.split('images/')
                    arr.push({prefix: imgArr[0], imageUrl: 'images/' + imgArr[1]})
                })
                return arr
            },

          getAreaConfig(province, city, district){
            let that = this
            this.$ajax.address.getAreaConfig()
              .then((res)=>{
                this.addressData = res.body.content
                window.localStorage.setItem('addressData',JSON.stringify(res.body.content))
                this.codeToName(province, city, district)
              })
          },
            // 地理位置解码
            codeToName(province, city, district){
                var str = ''
                this.addressData.forEach((v)=>{
                    if(v.postcode == province){
                        str += v.name
                    }
                    if(v.postcode == city){
                        str += '-' + v.name + '-'
                    }
                    if(v.postcode == district){
                        str += v.name
                    }
                })
                this.date.area = str
                this.date = JSON.parse(JSON.stringify(this.date))
            },
            //选择地区
            doShowAddress() {
                this.showAddress = true
            },
              doHideAddress(){
                this.showAddress = false
              },
            onShadowChange(ids, names) {
                this.areaArr = {
                    ids: ids,
                    names: names
                }
            },
            logShow() { //显示选择地区
            },
            logHide(str) {   //隐藏选择地区
              this.showAddress = false
                if (str) {   //str为真时表示点击确认
                    let that = this;
                    that.date.area = '';
                    this.areaArr.ids.forEach(function (v, i) {
                        if (i == 0) {
                            that.date.province = v
                        }
                        if (i == 1) {
                            if (that.areaArr.names[i].indexOf('市辖') >= 0) {
                                that.date.city = that.areaArr.ids[0]
                            } else if (!that.areaArr.ids[i] || that.areaArr.ids[i].indexOf('--') >= 0) {
                                that.date.city = that.areaArr.ids[0]
                            } else {
                                that.date.city = v
                            }
                        }
                        if (i == 2) {
                            if (!that.areaArr.ids[i] || that.areaArr.ids[i].indexOf('--') >= 0) {
                                that.areatDate.district = that.areaArr.ids[1]
                            } else {
                                that.date.district = v
                            }
                        }
                    })
                    this.areaArr.names.forEach(function (v) {
                        if ((!v && i >= 1) || (v.indexOf("--") >= 0 && i >= 1)) {
                            v = that.areaArr.names[i - 1]
                        }
                        that.date.area += v;
                    })
                }
            },
            selectDiscount(){

            },
            isDisabled() {
                if (this.date.merchantName && this.date.categoryCode && this.date.province && this.date.city && this.date.detailAddress && !this.comJS.checkIsTel(this.date.telephone)) {
                    this.disabled = false
                } else {
                    this.disabled = true
                }
            },
            addBusiness: function () {
                let str = '';
                for (let i = 0; i < this.extraImg.length; i++) {
                    let obj = this.comJS.pushImg(this.extraImg[i]);
                    str += obj;
                    if (i < this.extraImg.length - 1) {
                        str += ','
                    }
                }
                if(!this.extraImg.length){
                    this.$vux.toast.text('请上传门店图片', 'middle')
                    return
                }
                let obj = {
                    merchantId: this.$route.query.merchantId,
                    merchantName: this.date.merchantName,
                    name: this.user.name,
                    categoryCode: this.date.categoryCode,
                    telephone: this.date.telephone,
                    province: this.date.province,
                    city: this.date.city,
                    district: this.date.district,
                    detailAddress: this.date.detailAddress,
                    businessTime: this.date.businessTime,
                    mainImg: this.extraImg.length > 0 ? this.comJS.pushImg(this.extraImg[0]) : '',
                    extraImg: this.extraImg.length > 0 ? str : null,
                    fullAddress: this.date.area + this.date.detailAddress,
                    //  TODO 新加
                    discount: this.date.discount
                };
                alert(JSON.stringify(obj))
                if(this.$route.query.licenseStatus == 1){
                    //  有营业执照添加信息
                    this.saveMerchantDetail(obj)
                    return;
                }
                let that = this;
                let newObj = JSON.parse(JSON.stringify(this.store))
                this.$ajax.business.saveMerchant(Object.assign(newObj, obj))
                    .then((res) => {
                        // that.UPDATE_UPDATELIST(true);
                        that.$router.replace({
                            path: '/my/verifiedStatus', query: {
                                goUrl: "/my/business",
                                type: 0,
                                title: '添加成功',
                                text: '添加成功',
                                backUrl: '/my/business',

                            }
                        });
                    })
            },
            // you
            saveMerchantDetail(obj){
                let that = this
                this.$ajax.business.saveMerchantDetail(obj)
                    .then((res) => {
                        // that.UPDATE_UPDATELIST(true);
                        that.$router.replace({
                            path: '/my/verifiedStatus', query: {
                                goUrl: "/my/business",
                                type: 0,
                                title: '添加成功',
                                text: '添加成功',
                                backUrl: '/my/business',

                            }
                        });
                    })
            },
            pushImgSucc() {
                this.UPDATA_INTERACTIVE({url: ''})
            },
            pushImg() {
                this.imgClick = this.extraImg.length >= 1 ? 'date.extraImg' : 'date.mainImg';
                let str = "4";  //  this.extraImg.length >= 1 ? "5" : "4"
                this.Interactive.uploadPictures(str);
            },
            imgDelete(index) {
                this.extraImg.splice(index, 1);
            }
        },
        watch: {
            'date.merchantName': 'isDisabled',
            'date.telephone': 'isDisabled',
            'date.detailAddress': 'isDisabled',
            'date.province': 'isDisabled',
            'date.discount': 'isDisabled',
            "interactive.image": function () {
                if (this.interactive.image.url) {
                    this.extraImg.push(this.interactive.image.url);
                    this.pushImgSucc();
                };
            }
        },
        computed: mapState({user: state => state.user, interactive: state => state.interactive, store: state => state.business.store}),
    }
</script>
<style scoped>
    .vux-cell-box {
        font-size: 0.28rem;
        color: #ababab;
        padding: 0.38rem 0.32rem 0.38rem;
        background: #fff;
        border-color: #c7c7c7;
        border-bottom: 2px solid #efefef;
    }

    .weui-cell {
        padding: 0;
    }

    .weui-label {
        font-size: 0.32rem;
        color: #272727;
    }
</style>